<template>
  <div class="app-container calendar-list-container">
    <div class="filter-container">
      <el-input @keyup.enter.native="handleFilter" style="width: 200px;" class="filter-item" placeholder="用户昵称" prefix-icon="el-icon-search" v-model="search.nickname"></el-input>
      <el-date-picker v-model="search_time" type="daterange" align="left" unlink-panels range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions" class="filter-item"  value-format="yyyy-MM-dd" ></el-date-picker>
      <el-select @change='handleFilter' style="width: 140px" class="filter-item" v-model="search.info_cate">
        <el-option label="全部" value=''></el-option>
        <el-option v-for="item in infoCateData" :key="item.info_cate_id" :label="item.cate_name" :value="item.info_cate_id"></el-option>
      </el-select>
      <el-button class="filter-item" type="primary" plain v-waves icon="el-icon-search" @click="handleFilter">搜索</el-button>
    </div>
    <!-- // 这是列表 -->
    <el-table :data="listData"  style="width: 100%"  highlight-current-row  default-expand-all  max-width="250"  :row-class-name="tableRowClassName" v-loading="listLoading" element-loading-text="给我一点时间">
      <el-table-column type="expand">
        <template slot-scope="props" > 
          <el-form label-position="left" inline class="demo-table-expand">
            <el-form-item>
              <span>{{props.row.info_title}}</span>
            </el-form-item>
            <el-form-item label="正文: ">
             <span>{{props.row.info_content}}</span>
            </el-form-item>
            <el-form-item>
              <span class="foots" v-show="props.row.info_keys">{{props.row.info_keys}}</span>
              <span class="foots" v-show="props.row.info_address_text">{{props.row.info_address_text}}</span>
              <span class="foots">点赞: <span>{{props.row.info_up_count}}</span></span>
              <span class="foots">回复数: <span>{{props.row.info_reply_count}}</span></span>
              <span class="foots">发布时间: <span>{{props.row.info_publish_time}}</span></span>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
      <!-- // tab -->
      <el-table-column label="类型">
          <template slot-scope="scope">
            <el-tag type="danger">{{scope.row.cate_name}}</el-tag>
          </template>
      </el-table-column>
      <el-table-column  label="联系人">
          <template  slot-scope="scope">
            <span>{{scope.row.contact_name}}</span>
          </template>
      </el-table-column>
      <el-table-column  label="城市">
          <template  slot-scope="scope">
            <span>{{scope.row.info_city}}</span>
          </template>
      </el-table-column>
      <el-table-column  label="付款状态" width="120px">
        <template slot-scope="scope">
          <el-tag :type="scope.row.pay_state | statusFilter">{{scope.row.pay_state | statusName}}</el-tag>
        </template> 
      </el-table-column>
      <el-table-column  label="付款金额" width="120px">
        <template slot-scope="scope">
          <span>100</span>
        </template> 
      </el-table-column>
      <el-table-column  label="是否置顶">
        <template slot-scope="scope">
          <span>{{scope.row.info_is_top | isTopName}} </span>
        </template>
      </el-table-column>
      <el-table-column  label="置顶过期时间">
        <template slot-scope="scope">
          <span>{{scope.row.info_top_expired_time}} </span>
        </template>
      </el-table-column>
           <!-- //这里是操作   -->
      <el-table-column align="center" label="操作" width="150" class-name="small-padding fixed-width" fixed="right">
        <template slot-scope="scope">
          <el-button size="mini" type="danger" @click="handleDel(scope.row,1)">删除</el-button>
          <el-button size="mini" type="primary" @click="LookReply(scope.row)">查看回复</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination-container">
      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="listQuery.page" :page-sizes="[10,20,30, 50]" :page-size="listQuery.pagesize" layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </div>

    <!--查看窗口  -->
    <look-reply :visible.sync="lookVisible" :propsData="propsData"></look-reply>  
    <!--编辑窗口  END -->

    <!--可自定义按钮的样式、show/hide临界点、返回的位置  -->
    <!--如需文字提示，可在外部添加element的<el-tooltip></el-tooltip>元素  -->
    <el-tooltip placement="top" content="回到顶部">
      <back-to-top transitionName="fade" :customStyle="myBackToTopStyle" :visibilityHeight="300" :backPosition="50"></back-to-top>
    </el-tooltip>
  </div>
</template>


<script>

import waves from '@/directive/waves' // 水波纹指令
import BackToTop from '@/components/BackToTop' // 回到顶部
import * as api from '@/api/main-api' // API
import { mapGetters } from 'vuex'
import lookReply from '../social/lookReply'

export default {
  name: 'InformaList',
  directives: {
    waves
  },
  components: { BackToTop, lookReply },
  computed: {
    ...mapGetters([
      'outlet_id'
    ])
  },

  data() {
    return {
      // 回到顶部样式
      myBackToTopStyle: {
        right: '50px',
        bottom: '50px',
        width: '40px',
        height: '40px',
        'z-index': '9999',
        'border-radius': '4px',
        'line-height': '45px', // 请保持与高度一致以垂直居中 Please keep consistent with height to center vertically
        background: '#e7eaf1'// 按钮的背景颜色 The background color of the button
      },
      // 长带参数
      listQuery: {
        page: 1,
        pagesize: 10
      },
      // 搜索字段
      search: {
        nickname: '',
        info_cate: ''
      },
      search_time: '',

      total: 0,
      listLoading: false,
      // 编辑传值
      lookVisible: false,
      propsData: {},

      listData: [],
      infoCateData: [],
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            picker.$emit('pick', [start, end])
          }
        }]
      }

    }
  },

  // 初始化数据
  created() {
    this.listQuery.unit_id = this.outlet_id
    setTimeout(() => {
      this.fetchData()
    }, 20)
    this.infoCateSelect()
  },

  // 参数过滤
  filters: {
    statusFilter(status) {
      const statusMap = {
        0: 'info',
        1: 'success',
        2: 'danger'
      }
      return statusMap[status]
    },
    statusName(status) {
      return (status === '1') ? '已付款' : '未付款'
    },
    isTopName(status) {
      return (status === '1') ? '置顶' : '否'
    }
  },

  // 触动方法
  methods: {
    // 控制每页调数
    handleSizeChange(val) {
      this.listQuery.pagesize = val
      this.fetchData()
    },

    // 跳页
    handleCurrentChange(val) {
      this.listQuery.page = val
      this.fetchData()
    },

    // 搜搜
    handleFilter() {
      this.listQuery.page = 1
      // 复制一个对象<br>var obj = { a: 1 ,b:2};
      if (this.search_time) {
        this.search.stime = this.search_time[0]
        this.search.etime = this.search_time[1]
      }
      this.listQuery = Object.assign(this.listQuery, this.search)
      this.fetchData()
    },

    // 获取类别(选择使用)
    infoCateSelect() {
      api.infoCateSelectApi().then(response => {
        if (response.data.code === 0) {
          this.infoCateData = response.data.data
        }
      })
    },

    // 获取数据
    fetchData() {
      this.listLoading = true
      return new Promise((resolve, reject) => {
        api.informaListApi(this.listQuery).then(response => {
          if (response.data.code === 0) {
            this.listData = response.data.data
            this.total = parseInt(response.data.total)
          }
          this.listLoading = false
        })
      })
    },

    // 订单删除
    handleDel(row, type) {
      this.$confirm('删除此信息将屏蔽所有回复, 是否继续?', '提示', {
        confirmButtonText: '删除',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        var params = {
          id: (type === 1) ? row.info_id : row.info_reply_id,
          unit_id: this.outlet_id,
          type: type
        }
        api.infoDeleteApi(params).then(response => {
          if (response.data.code === 0) {
            const index = this.listData.indexOf(row)
            this.listData.splice(index, 1)
            this.$root.message('已移除指定信息', 'success')
            this.total = this.total - 1
          }
        })
      }).catch(() => {
        this.$root.message('已取消删除', 'info')
      })
    },

    // 主订单行颜色
    tableRowClassName({ row, rowIndex }) {
      return 'success-row'
    },

    // 查看回复弹框
    LookReply(row) {
      this.lookVisible = !this.lookVisible
      this.propsData = row
    }
  },

  // 监事事件
  watch: {
    outlet_id(id) {
      this.$nextTick(() => {
        setTimeout(() => {
          this.listQuery.unit_id = id
          this.fetchData()
        }, 20)
      })
    }
  }
}
</script>


<style>
  .el-table .success-row {
    background: #d6dcdd;
  }
  .foots {
    font-size: 14px;
    color: #95abca;
    margin-left: 50px;
  }
  .demo-table-expand label {
    width: 50px;
    color: #99a9bf;
  }
  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 100%;
  }
</style>
